<template>
    <div>
        <Card dis-hover :bordered="false" class="ivu-mt">
            <Form label-position="top">
                <FormItem label="模块">
                    <Select v-model="modular" v-width="150">
                        <Option value="患者">患者</Option>
                        <Option value="导医">导医</Option>
                        <Option value="消费">消费</Option>
                        <Option value="治疗">治疗</Option>
                        <Option value="治疗">回访</Option>
                    </Select>
                </FormItem>
                <FormItem label="字段信息">
                    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                        <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
                    </div>
                    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
                        <Checkbox label="姓名"></Checkbox>
                        <Checkbox label="性别"></Checkbox>
                        <Checkbox label="年龄"></Checkbox>
                        <Checkbox label="归属人"></Checkbox>
                        <Checkbox label="诊疗号"></Checkbox>
                        <Checkbox label="手机号"></Checkbox>
                        <Checkbox label="来源渠道"></Checkbox>
                        <Checkbox label="病种"></Checkbox>
                        <Checkbox label="挂号时间"></Checkbox>
                        <Checkbox label="城市"></Checkbox>
                    </CheckboxGroup>
                </FormItem>
            </Form>
            <Form>
                <div class="ivu-mb-8">筛选条件</div>
                <FormItem v-for="(item,index) in formDynamic.items" v-if="item.status" :key="index" :prop="'item.'+ index + '.value'">
                    <Select v-width="150" placeholder="请选择">
                        <Option v-for="item in formDynamic.fieldList" :value="item.value" :key="item.value">{{item.label}}</Option>
                    </Select>
                    <Select v-width="150" class="ivu-ml-8" placeholder="请选择">
                        <Option v-for="item in formDynamic.countList" :value="item.value" :key="item.value">{{item.label}}</Option>
                    </Select>
                    <Select v-width="150" class="ivu-ml-8">
                        <Option v-for="item in formDynamic.personList" :key="item.value" :value="item.value">{{item.label}}</Option>
                    </Select>
                    <Button type="default" class="ivu-ml-8" @click="handleRemove(index)">删除</Button>
                </FormItem>
                <FormItem>
                    <Button type="dashed" icon="md-add" @click="handleAdd">新增</Button>
                </FormItem>
                <Button type="primary" size="large" @click="hadnleExport" class="ivu-mt-16">开始导出</Button>
            </Form>
        </Card>
        <Modal v-model="exportModal" title="数据导出" footer-hide :mask-closable="false">
            <p>
                数据正在导出，
                <b color="ivu-warning" class="ivu-mr-8 ivu-text-warning">10</b>秒后页面将跳转至数据导出日志页面
            </p>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            modular: '患者',
            indeterminate: true,
            checkAll: false,
            checkAllGroup: ['姓名', '性别'],
            index: 1,
            exportModal: false,
            formDynamic: {
                items: [
                    {
                        value: '',
                        index: 1,
                        status: 1
                    }
                ],
                fieldList: [
                    {
                        value: '姓名',
                        label: '姓名'
                    },
                    {
                        value: '性别',
                        label: '性别'
                    },
                    {
                        value: '年龄',
                        label: '年龄'
                    },
                    {
                        value: '归属人',
                        label: '归属人'
                    },
                    {
                        value: '挂号时间',
                        label: '挂号时间'
                    },
                    {
                        value: '城市',
                        label: '城市'
                    }
                ],
                countList: [
                    {
                        value: '等于',
                        label: '等于'
                    },
                    {
                        value: '不等于',
                        label: '不等于'
                    },
                    {
                        value: '大于等于',
                        label: '大于等于'
                    },
                    {
                        value: '小于等于',
                        label: '小于等于'
                    }
                ],
                personList: [
                    {
                        value: '高玲',
                        label: '高玲'
                    },
                    {
                        value: '王艳',
                        label: '王艳'
                    },
                    {
                        value: '张在峰',
                        label: '张在峰'
                    }
                ]
            }
        }
    },
    methods: {
        handleCheckAll() {
            if (this.indeterminate) {
                this.checkAll = false
            } else {
                this.checkAll = !this.checkAll
            }
            this.indeterminate = false
            if (this.checkAll) {
                this.checkAllGroup = [
                    '姓名',
                    '性别',
                    '年龄',
                    '归属人',
                    '诊疗号',
                    '手机号',
                    '来源渠道',
                    '病种',
                    '挂号时间',
                    '城市'
                ]
            } else {
                this.checkAllGroup = []
            }
        },
        checkAllGroupChange(data) {
            if (data.length === 10) {
                this.indeterminate = false
                this.checkAll = true
            } else if (data.length > 0) {
                this.indeterminate = true
                this.checkAll = false
            } else {
                this.indeterminate = false
                this.checkAll = false
            }
        },
        hadnleExport() {
            this.exportModal = true
        },
        handleAdd() {
            this.index++
            this.formDynamic.items.push({
                value: '',
                index: this.index,
                status: 1
            })
        },
        handleRemove(index) {
            this.formDynamic.items[index].status = 0
        }
    }
}
</script>
<style scoped>
.ivu-text-warning {
    color: #ff9900;
    font-size: 16px;
}
</style>
